import {
  View,
  Text,
  StyleSheet,
  FlatList,
  Image,
  useWindowDimensions,
  ScrollView,
} from 'react-native';
import React, {useEffect, useRef, useState} from 'react';
import {base, productDetails} from '../service';
import AutoHeightWebView from 'react-native-autoheight-webview';

export default function ProductDetail({navigation, route}) {
  // 调用React-Native提供的钩子,获取屏幕尺寸(dimensions)
  // let x = useWindowDimensions()
  // console.log(x);

  let winWidth = useWindowDimensions().width;

  // 对象引用 => 指向轮播广告列表
  let swiper = useRef();

  // 状态变量 => 当前显示哪一个轮播广告想  初始值-1表示还没有列表项
  let [cur, setCur] = useState(-1);

  // 状态变量 => 型号信息
  let [family, setFamily] = useState({});

  // 状态变量 => 商品信息
  let [product, setProduct] = useState({});

  // 声明周期方法:组件挂载时
  useEffect(() => {
    // 1.读取上个页面传递来的路由参数:pid
    // console.log('Route', route);  // 当前页面的路由信息:路由地址 + 请求参数
    // console.log('Navigation', navigation);  // 导航对象,用于页面跳转
    let pid = route.params.pid;
    console.log(pid);
    // 2.根据商品编号查询该商品的详情
    (async () => {
      let data = await productDetails(pid);
      // console.log(data);

      // 对服务器端返回的数据进行预处理
      // 1.把所有的 src = "img 替换为 src="http://www.codeboy.com/xuezi/img"
      data.product.details = data.product.details.replace(
        /src="img/g,
        `src="${base}../img`,
      );
      // 2.把所有的 <img 替换为 <img style="width:100%"
      data.product.details = data.product.details.replace(
        /<img/g,
        `<img style="width:100%"`,
      );

      setFamily(data.family);
      setProduct(data.product);
    })();
  }, []);

  // 渲染一个列表项 =>就是一个轮播广告想
  let _renderItem = ({item, index}) => {
    // 列表项(即一张图片) 宽度设置为与屏幕宽度一致
    return (
      <Image
        source={{uri: base + '../' + item.md}}
        style={{width: winWidth, height: winWidth}}></Image>
    );
  };

  // 生命周期方法 => prouct中有了图片列表
  useEffect(() => {
    // console.log('商品的图片列表被渲染出来了:', product.picList);
    let timer = null;
    if (product.picList) {
      // 如果从服务器端加载到了图片列表,启用轮播定时器
      timer = setInterval(() => {
        // console.log(cur);
        cur = cur < 0 ? 0 : cur;
        let i = cur + 1;
        i = i < product.picList.length ? i : 0;
        setCur(i);
      }, 2000);
    }
    return () => {
      clearInterval(timer);
      timer = null;
    };
  }, [product.picList, cur]); //依赖列表可以是对象的成员

  // 生命周期方法 => 监听cur的改变
  useEffect(() => {
    // 找到轮播广告组件,调用其滚动到第i个列表项的方法
    // swiper相当于 三条杠 的牌子
    // swiper.current相当于某个学生
    if (cur >= 0) {
      swiper.current.scrollToIndex({
        index: cur,
      });
    }
  }, [cur]);

  return (
    // 注意:如果最外层父元素使用View的话,内容高度超出屏幕时,无法竖直
    <ScrollView>
      {/* F1:型号名称  */}
      <Text style={ss.fname}>产品型号:{family.fname}</Text>

      {/* F2:轮播广告=>使用FlatList模拟实现 */}
      {/* horizontal:是否把列表项水平分布 */}
      {/* pagingEnabled:是否启用分页(即要么显示第N个列表项,要么第N+1,不能停在二者之间) */}
      <FlatList
        data={product.picList}
        renderItem={_renderItem}
        horizontal={true}
        pagingEnabled={true}
        ref={swiper}></FlatList>

      {/* F3:介绍性文字 */}
      <Text>主标题:{product.title}</Text>
      <Text>副标题:{product.subtitle}</Text>
      <Text>单价:{product.price}</Text>
      <Text>修改</Text>
      <Text>编辑</Text>

      {/* F4:商品详情 */}
      {/* <Text>{product.details}</Text> */}
      {/* 使用AutoHeightWebView加载一个完整的网页 */}
      {/* <AutoHeightWebView
        source={{uri: 'https://www.baidu.com/'}}></AutoHeightWebView> */}

      {/* <AutoHeightWebView source={{html: '<h1>1号标题</h1><hr/><hr/>'}} /> */}

      <AutoHeightWebView source={{html: product.details}} />
    </ScrollView>
  );
}

// 内部样式
let ss = StyleSheet.create({
  fname: {
    fontWeight: 'bold',
    borderBottomWidth: 1,
    borderBottomColor: '#aaa',
    padding: 10,
  },
});
